<template>
	<view class="main">
		<gui-a-header bg="#0236c9" title="招聘会详情"></gui-a-header>
		<view class="header">
			<view class="wean">
				<view class="f34 cfff gui-bold">
					{{recruitData.title}}
				</view>
				<view class="txt cfff f24 mt10">
					{{recruitData.mixTitle}}
				</view>
			</view>
			<image class="zp_bg" src="../../static/image/zpxq_bg.png" mode="widthFix"></image>
		</view>
		<view class="tap_box">
			<view class="tab gui-flex">
				<view class="tab_item" @tap="navChange(index)" :class="{'active': currentIndex == index}"
					v-for="(item,index) in tabs" :key="index">
					{{item.label}}
				</view>
			</view>
			<view class="con conpd bgfff" v-show="currentIndex == 0">
				<view v-if="loading">
					<view class="news-list gui-flex gui-rows gui-nowrap mt20" v-for="(itm, index) in 10" :key="index">
						<view class="skeleton">
							<gui-skeleton :canShow="false"
								customStyle="height:40rpx; border-radius:6rpx;"></gui-skeleton>
							<view style="height: 20rpx;" class="bgfff">

							</view>
							<gui-skeleton :canShow="false"
								customStyle="height:288rpx; border-radius:6rpx;"></gui-skeleton>
						</view>
					</view>
				</view>
				<view class="card card_bg">
					<view class="f28 colorBlue gui-bold">
						简介
					</view>
					<view class="txt mt10 c333 f24">
						{{recruitData.context}}
					</view>
				</view>

				<view class="card card_no_bg">
					<view class="f28 colorBlue gui-bold">
						数据
					</view>
					<view class="txt lineHeight mt10 c333 f24">
						<view class="gui-flex">
							<view class="label">
								参展单位：
							</view>
							<view class="val">
								{{recruitData.conpanyNum}}
							</view>
						</view>
						<view class="gui-flex">
							<view class="label">
								职位总数：
							</view>
							<view class="val">
								{{recruitData.postNum}}
							</view>
						</view>
						<view class="gui-flex">
							<view class="label">
								举办时间：
							</view>
							<view class="val">
								{{recruitData.startTime}} ~ {{recruitData.endTime}}
							</view>
						</view>
						<view class="gui-flex">
							<view class="label">
								指导单位：
							</view>
							<view class="val">
								{{recruitData.guidanceConpany}}
							</view>
						</view>
						<view class="gui-flex">
							<view class="label">
								承办单位：
							</view>
							<view class="val">
								{{recruitData.undertakeConpany}}
							</view>
						</view>
						<view class="gui-flex" @click="showLocation">
							<view class="label">
								举办地方：
							</view>
							<view class="val">
								{{recruitData.holdConpany}}
								<text class="gui-icons" style="color: #D50000;">&#xe61c;</text>
							</view>
						</view>
						<view class="gui-flex">
							<view class="label">
								定展电话：
							</view>
							<view class="val gui-bold" @click="callPhone">
								{{recruitData.exhibitionPhone}} <text class="bai-icons"
									style="color: #D50000;">&#xe625;</text>
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="card card_no_bg">
					<view class="f28 gui-flex gui-space-between gui-align-items-center">
						<view class="title colorBlue gui-bold">
							参展单位
						</view>
						<view class="more f20" style="color: #D50000;" @click="changeTab(1)">
							更多>
						</view>
					</view>
					<scroll-view :scroll-x="true" class="img_list mt20">
						<view class="gui-flex gui-justify-content-start">
							<view class="item gui-flex gui-column gui-align-items-center gui-justify-content-center"
								v-for="(item,index) in conpanyShowList" :key="index">
								<gui-image mode="aspectFill" :src="item.logo" borderRadius="10rpx" :width="122"
									:height="122"></gui-image>
								<view class="name f22 c666 mt10">
									{{item.companyName}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="line"></view>
				<view class="card card_no_bg">
					<view class="f28 gui-flex gui-space-between gui-align-items-center">
						<view class="title colorBlue gui-bold">
							参展职位
						</view>
						<view class="more f20" style="color: #D50000;" @click="changeTab(2)">
							更多>
						</view>
					</view>
					<view class="post-list">
						<view class="item" v-for="(item,index) in postShowList" :key="index">
							<view class="flex-ac-jb">
								<text class="title">{{item.postName}}</text>
								<text class="pay f24 colorRed">{{item.postMoney}}</text>
							</view>
							<view class="info flex-ac f22">
								<text>{{item.workArea}} {{item.work}} {{item.education}} 招{{item.recruitNum}}人</text>
							</view>
							<view class="company flex-ac-jb">
								<view class="left flex-ac">
									<image class="qiye-icon" src="../../static/index/qiye.png" mode="widthFix"
										style="height: auto;"></image>
									<text class="c666 f24">{{item.comUsertConpanyInfo.companyName}}</text>
								</view>
								<text class="bz_color f20">查看残疾招收标准</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="con bgfff" v-show="currentIndex == 1">
				<view class="search gui-flex gui-space-between">
					<input type="text" class="search_input f24" v-model="query[0].title" placeholder="请输入关键字" />
					<view class="search_bt" @click="loadConpanyList">
						<text class="gui-icons">&#xe604;</text>
					</view>
				</view>
				<view class="company-list">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" style="height: 800rpx;" class="scroll-view-bg">
						<gui-empty v-if="conpanyList.length <= 0">
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
										mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
							</template>
						</gui-empty>
						<view class="company-item flex-ac-jb bgfff radius" v-for="(item,index) in conpanyList"
							:key="item.id" @tap="$u.to('/pages/mine/company-collect-detail')">
							<view class="company-headImg">
								<gui-image :src="item.logo" :width="122" :height="122" borderRadius="14rpx"
									mode="aspectFill"></gui-image>
							</view>
							<view class="company-info flex1 flex-dc">
								<text class="gui-bold">{{item.companyName}}</text>
								<text class="c666 f22">{{item.industry}}/{{item.personnel}}</text>
							</view>
							<view class="f20 colorBlue">
								招聘岗位：{{item.zzNum}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="con bgfff" v-show="currentIndex == 2">
				<view class="search gui-flex gui-space-between">
					<input type="text" class="search_input f24" v-model="query[1].title" placeholder="请输入关键字" />
					<view class="search_bt" @click="loadPostList">
						<text class="gui-icons">&#xe604;</text>
					</view>
				</view>
				<!-- 使用滚动区域来实现主体内容区域 -->
				<scroll-view :scroll-y="true" style="height: 800rpx;" class="scroll-view-bg">
					<view class="post-list">
						<gui-empty v-if="postList.length <= 0">
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
										mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text
									class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
							</template>
						</gui-empty>
						<view class="item" v-for="(item,index) in postList" :key="item.id">
							<view class="flex-ac-jb">
								<text class="title">{{item.postName}}</text>
								<text class="pay f24 colorRed">{{item.postMoney}}</text>
							</view>
							<view class="info flex-ac f22">
								<text>{{item.workArea}} {{item.work}} {{item.education}} 招{{item.recruitNum}}人</text>
							</view>
							<view class="company flex-ac-jb">
								<view class="left flex-ac">
									<image class="qiye-icon" src="../../static/index/qiye.png" mode="widthFix"
										style="height: auto;"></image>
									<text class="c666 f24">{{item.comUsertConpanyInfo.companyName}}</text>
								</view>
								<text class="bz_color f20">查看残疾招收标准</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="btn_warp">
			<button class="saveBtn over" v-if="recruitData.shJinXing == 2">已结束</button>
			<button class="saveBtn" @click="sumbit" v-else-if="recruitData.shBaoMing == 1">立即报名</button>
			<button class="saveBtn over" v-else-if="recruitData.shBaoMing == 0">已报名</button>
		</view>
	</view>
</template>

<script setup>
	import {
		selectRecruitJobInfo,
		selectRecruitJobConpanyList,
		selectUserPostConpanyListAll,
		upUserRecruitJobUser
	} from '@/api/user.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		inject
	} from 'vue';
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	const store = useUserStore()
	const {
		userInfo
	} = storeToRefs(store)
	const $u = reactive(inject('$u'))
	const timer = ref(null);

	const loading = ref(true);
	const isClick = ref(true);
	setTimeout(() => {
		loading.value = false;
	}, 1000)
	const query = ref([{
		pageNum: 1,
		pageSize: 100,
		title: ''
	}, {
		pageNum: 1,
		pageSize: 100,
		title: ''
	}])
	const recruitId = ref('')
	const recruitData = ref({})
	const conpanyList = ref([])
	const conpanyShowList = ref([])
	const postList = ref([])
	const postShowList = ref([])


	const currentIndex = ref(0);
	const tabs = [{
		label: '招聘介绍'
	}, {
		label: '参展单位'
	}, {
		label: '参展职位'
	}]

	const navChange = (e) => {
		currentIndex.value = e;
	}

	onLoad((option) => {
		if (option.recruitId) {
			recruitId.value = option.recruitId;
			loadData();
		}
	})

	const loadData = () => {
		selectRecruitJobInfo({
			id: recruitId.value
		}).then(res => {
			if (res.code == 200) {
				recruitData.value = res.data;
			}
		})
		loadConpanyList();
		loadPostList();
	}

	const loadConpanyList = () => {
		let queryParam = Object.assign(query.value[0], {})
		selectRecruitJobConpanyList({
			id: recruitId.value,
			...queryParam
		}).then(res => {
			if (res.code == 200) {
				conpanyList.value = res.rows;
				conpanyShowList.value = res.rows.slice(0, 5);
			}
		})
	}

	const loadPostList = () => {
		let queryParam = Object.assign(query.value[1], {})
		selectUserPostConpanyListAll({
			id: recruitId.value,
			...queryParam
		}).then(res => {
			if (res.code == 200) {
				postList.value = res.rows;
				postShowList.value = res.rows.slice(0, 5);
			}
		})
	}

	const sumbit = () => {
		if (!userInfo.value.shUserInfo || userInfo.value.shUserInfo + '' === '0') {
			$u.msg("请先完善个人简历");
			if (timer.value) clearTimeout(timer.value);
			timer.value = setTimeout(() => {
				$u.to(`/pages/mine/curriculumVitae/curriculum-vitae`);
			}, 1000)
			return 
		}
		if (isClick.value) {
			isClick.value = false;
		} else {
			return;
		}
		upUserRecruitJobUser({
			refRecruitJobId: recruitId.value
		}).then(res => {
			if (res.code == 200) {
				recruitData.value.shBaoMing = 0;
				$u.msg("报名成功")
			}
		}).finally(() => {
			isClick.value = true;
		})
	}
	
	const callPhone = () => {
		$u.makePhone(recruitData.value.exhibitionPhone.toString());
	}
	
	const changeTab = (e) => {
		currentIndex.value = e;
	}
	
	const showLocation = () => {
		if(recruitData.value.lat && recruitData.value.lon) {
			uni.openLocation({
				latitude: Number(recruitData.value.lat),
				longitude: Number(recruitData.value.lon),
				name: recruitData.value.holdConpany,
				success: function() {
					console.log('success');
				}
			});
		}
	}
	
</script>

<style lang="scss">
	page,
	.main {
		background: linear-gradient(180deg, #0236c9 0%, #4072FE 100%);
	}

	.header {
		position: relative;
		padding: 40rpx 20rpx 80rpx 40rpx;
		box-sizing: border-box;

		.wean {
			width: 420rpx;
		}
	}

	.zp_bg {
		position: absolute;
		left: 0;
		right: 0;
		top: 40rpx;
		width: 100%;
		height: auto;
	}

	.con {
		padding: 0 23rpx 23rpx 23rpx;
		border-bottom-left-radius: 26rpx;
		border-bottom-right-radius: 26rpx;

		.card_bg {
			background-image: linear-gradient(to top, #ecf6ff 0%, #f9fcff 100%);
			padding: 17rpx;
		}

		.card_no_bg {
			padding: 17rpx;
		}
	}

	.conpd {
		padding: 33rpx 23rpx;
	}

	.tap_box {
		box-sizing: border-box;
		padding: 40rpx;

		.tab {
			width: 100%;
			align-items: flex-end;
		}

		.tab_item {
			flex: 1;
			border-top-left-radius: 26rpx;
			border-top-right-radius: 26rpx;
			background-color: #F0F7FA;
			height: 71rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24rpx;

			&.active {
				position: relative;
				color: #4072FE;
				font-size: 30rpx;
				font-weight: bold;
				height: 88rpx;
			}

			&.active::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 135rpx;
				height: 3rpx;
				background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
				border-radius: 1rpx;
			}
		}
	}

	.lineHeight {
		line-height: 150%;
	}

	.line {
		border: 1rpx dashed rgba(225, 227, 228, 0.5);
	}

	.img_list {
		.item {
			margin-right: 20rpx;
		}
	}

	.bz_color {
		color: #167C3A;
	}

	.btn_warp {
		padding: 0rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;

		.saveBtn {
			background: #0034C7;
			font-size: 30rpx !important;

			&.over {
				background: #999999;
			}
		}
	}

	.company-list {
		padding: 0;

		.company-info {
			min-height: 90rpx;
		}
	}

	.company-item {
		padding: 20rpx 0;
		margin-top: 0;
	}

	.search {
		padding: 40rpx 13rpx 10rpx 13rpx;

		.search_input {
			flex: 1;
			height: 72rpx;
			border-radius: 20rpx;
			border: 1px solid #4072FE;
			background: linear-gradient(180deg, #eef8fd 0%, #f9fdff 100%);
			padding: 0 20rpx;
			margin-right: 10rpx;
		}

		.search_bt {
			width: 73rpx;
			height: 73rpx;
			background: linear-gradient(180deg, #0034C7 0%, #4072FE 100%);
			border-radius: 14rpx;
			text-align: center;
			line-height: 73rpx;
			color: #ffffff;
		}
	}
</style>